<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增参数')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <style>
        .fileinput-upload-button {
            display: none !important;
        }

    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-config-add" name="form-config-add" enctype="multipart/form-data"
          th:object="${danDetail}">
        <input id="danDetailId" name="danDetailId" type="hidden" th:field="*{danDetailId}"/>

        <div class="form-group">
            <div style="width: 73%;margin-left: 130px">
                <label class="font-noraml">附件:</label>
                <div class="file-loading">
                    <input type="file" name="file" id="filePath" multiple/>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">描述：</label>
            <div class="col-sm-8">
                <textarea id="describe" name="describe" class="form-control" th:field="*{describe}"></textarea>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
    var fileArr = new Array();
    var prefix = ctx + "danManage";
    var danId;
    var danDetailId = [[${danDetailId}]];

    $(function () {
        var danDetail = [[${danDetail}]];

        fileArr.push(danDetail.virtualPath);

        danId = danDetail.danId;
        if (fileArr != '' || fileArr != null) {
            $('#filePath').fileinput({
                language: 'zh',                                        //语言
                uploadUrl: '<%=basePath%>/commodity/addCommodityPic',   //上传地址
                // deleteUrl:prefix + "/deleteDanFilePath/"+danDetail.danDetailId,     // 删除图片时的请求路径

                showPreview: true,				//展前预览
                showUpload: false,				//显示上传按钮
                showCaption: false,				//显示文字表述
                uploadAsync: false,                             //false 同步上传，后台用数组接收，true 异步上传，每次上传一个file,会调用多次接口
                removeFromPreviewOnError: true, //当选择的文件不符合规则时，例如不是指定后缀文件、大小超出配置等，选择的文件不会出现在预览框中，只会显示错误信息
                maxFileCount: 5,
                maxFileSize: 1024 * 10,			//单位为kb，如果为0表示不限制文件大小
                allowedFileExtensions: ["jpg", "jpeg", "gif", "png", "bmp", "pdf", "doc", "docx"],
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                overwriteInitial: false,
                initialPreviewAsData: true,
                initialPreview: fileArr,
                initialPreviewConfig: [ //配置预览中的一些参数
                    {
                        caption: "transport-1.jpg",
                        size: 329892,
                        width: "120px",
                        url: "deletePic",
                        key: danDetail.danDetailId
                    },
                    {
                        caption: "transport-2.jpg",
                        size: 872378,
                        width: "120px",
                        url: "deletePic",
                        key: danDetail.danDetailId
                    }
                ]
            }).on('filepredelete', function (event, key, jqXHR, data) {
                console.log('Key = ' + key);
                console.log(jqXHR);
                console.log(data);
            });
        }
    });

    function submitHandler() {
        var formData = new FormData();
        if ($('#filePath')[0].files[0] == null) {
            $.modal.alertWarning("请先选择文件路径");
            return false;
        }

        if ($('#filePath')[0].files[1] != null) {
            $.modal.alertWarning("仅支持单文件上传");
            return false;
        }

        if ($("#describe").val() == null || $("#describe").val() == '') {
            $.modal.alertWarning("请填写描述信息");
            return false;
        }

        formData.append('danId', danId);
        formData.append('describe', $("#describe").val());
        formData.append('file', $('#filePath')[0].files[0]);
        formData.append('danDetailId', danDetailId);

        $.ajax({
            url: prefix + "/updateDanDetail",
            type: 'post',
            cache: false,   //上传文件不需要缓存
            data: formData,
            processData: false, //data值是FormData对象，不需要对数据进行处理
            contentType: false, //contentType值，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。
            dataType: "json",
            success: function (result) {
                $.operate.successCallback(result);
            }
        });
    }
</script>
</body>
</html>
